import { PageContainer } from "@ant-design/pro-components";
import {
  Button,
  Modal,
  Input,
  Form,
  Tabs,
  Table,
  Select,
  Checkbox,
  Space,
  message,
  InputNumber,
} from "antd";
import { useState, forwardRef, useImperativeHandle, useRef } from "react";
import styles from "./styles.less";
const { TextArea } = Input;

export default forwardRef((props, ref) => {
  const [open, setOpen] = useState(false);
  const tableRef = useRef(null);
  const [form] = Form.useForm();

  const submitForm = async () => {
    let res = await form.validateFields();
    setOpen(false);
    props.updateNewStaff(res);
  };

  useImperativeHandle(ref, () => ({
    setOpen,
    form,
  }));

  return (
    <Modal
      open={open}
      title="编辑员工信息"
      forceRender
      onCancel={() => setOpen(!open)}
      footer={
        <Space>
          <Button onClick={() => setOpen(false)}>取消</Button>
          <Button onClick={submitForm} type="primary">
            确定
          </Button>
        </Space>
      }
    >
      <Form form={form}>
        <Form.Item label="订单编号" name="id">
          {form.getFieldValue("id")}
        </Form.Item>
        <Form.Item label="原销售员工" name="userNickName">
          {" "}
          {form.getFieldValue("userNickName")}{" "}
        </Form.Item>
        <Form.Item
          label="新员工名称"
          name="userId"
          rules={[{ required: true }]}
        >
          <Select
            onChange={(value) => {
              let staff = props.allStaff.filter((s) => s.userId == value);
              form.setFieldValue("tel", staff[0].phonenumber);
            }}
          >
            {props.allStaff.map((v) => (
              <Select.Option value={v.userId}>{v.nickName}</Select.Option>
            ))}
          </Select>
        </Form.Item>
        <Form.Item name="tel" hidden></Form.Item>
      </Form>
    </Modal>
  );
});

// export default Dom
